﻿@model IEnumerable<MenuManage>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
    <div class="container p-3">
        <div class="row pt-4">
            <div class="col-6">
                <h1 class="text-primary">菜单信息</h1>
            </div>
            <div class="col-6">
                <a asp-controller="Menu" asp-action="Create" class="btn btn-primary">添加</a>
            </div>
        </div>

    </div>
    <div class="layui-container">
        <br><br>
        <a class="layui-btn layui-btn-normal" href="index.html">&lt;&lt;返回</a>
        &nbsp;&nbsp;
        <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="btn-refresh">刷新表格</button>
        </div>

        <table id="table1" class="layui-table" lay-filter="table1"></table>

    </div>
    <!-- 操作列 -->
    <script type="text/html" id="oper-col">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
@*        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>*@
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="dtl">详情</a>

    </script>

    <script src="~/layui/layui.js"></script>
    <script>

        $(function () {
            var data = [];
            $.ajax({
                url: "/Menu/GetMenuTreeData",    //后台数据请求地址
                type: "post",
                //async: false,
                success: function (resut) {
                    data = resut;

                    layui.config({
                        base: '../module/'
                    }).extend({
                        treetable: 'treetable-lay/treetable'
                    }).use(['table', 'form', 'element', 'treetable'], function () {
                        var $ = layui.jquery;
                        var table = layui.table;
                        var form = layui.form;
                        var element = layui.element;
                        var treetable = layui.treetable;

                        // 渲染表格
                        var renderTable = function () {
                            layer.load(2);
                            treetable.render({
                                treeColIndex: 2,//树形图标显示在第几列
                                treeSpid: -1,//最上级的父级id
                                treeIdName: 'id',// id字段的名称
                                treePidName: 'parentId',// 父级字段的名称
                                elem: '#table1',
                                //data: getMenuData(),
                                data: data,
                                //url: '../data2.json',
                                page: false,
                                cols: [[
                                    { field: 'id', title: 'id' },
                                    { field: 'name', title: 'name' },
                                    { field: 'parentId', title: 'pid' },
                                    { field: 'menuURL', title: 'menuUrl' },
                                    { field: 'icon', title: 'icon' },
                                    { field: 'type', title: 'type' },
                                    { templet: '#oper-col', title: 'oper' }
                                ]],
                                done: function () {
                                    layer.closeAll('loading');
                                }
                            });
                        };

                        renderTable();

                        $('#btn-expand').click(function () {
                            treetable.expandAll('#table1');
                        });

                        $('#btn-fold').click(function () {
                            treetable.foldAll('#table1');
                        });

                        $('#btn-refresh').click(function () {
                            renderTable();
                        });
                        //监听工具条
                        table.on('tool(table1)', function (obj) {
                            var data = obj.data;
                            var layEvent = obj.event;

                            //if (layEvent === 'del') {
                            //    window.location.href = "Delete?id="+data.id;
                            //    //layer.href('删除' + data.id);
                            //} else 
                            if (layEvent === 'edit') {
                                window.location.href = "menu/Edit?id=" + data.id;
                                //layer.msg('修改' + data.id);
                            }else if(layEvent === 'dtl'){
                                window.location.href = "menu/Details?id=" + data.id;
                            }
                        });
                    });
                }
            });
        });
    </script>
</body>
</html>